var getAllBtn = document.getElementById('get-all-btn');
var list = document.getElementById('list');
var postBtn = document.getElementById('post-btn');

getAllBtn.onclick = function () {
  // myAjax({
  //   url: '/users/all',
  //   data: {
  //     id: 1
  //   },
  //   success: function (res) {
  //     render(res.data);
  //     console.log('请求成功：', res);
  //   },
  //   fail: function (err) {
  //     console.log(err);
  //   }
  // })

  // jQuery 低版本支持
  // $.ajax({
  // type: 'GET',
  //   url: '/users/all',
  //   data: {
  //     id: 1
  //   },
  //   success: function (res) {
  //     render(res.data);
  //     console.log('请求成功：', res);
  //   },
  //   error: function (err) {
  //     console.log(err);
  //   }
  // })

  // 高版本
  $.ajax({
    method: 'GET',
    data: {
      id: 1,
      name: 'jack'
    },
    url: '/users/all'
  })
    .done(function (res) {
      console.log('请求成功：', res)
    })
    .fail(function (err) {
      console.log('请求失败：', err);
    })
}

function render(data) {
  list.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = data[i];

    list.appendChild(li);
  }
}


// post 示例
postBtn.onclick = function () {
  myAjax({
    url: '/users/login',
    method: 'POST',
    data: {
      id: 1,
      name: 'jack'
    },
    success: function (res) {
      console.log('请求成功：', res);
    },
    fail: function (err) {
      console.log(err);
    }
  })
}


/* 
  AJAX 请求封装
  @methods: myAjax
  @parmas: {Object} options 请求参数
*/
function myAjax(options) {
  if (Object.prototype.toString.call(options) != '[object Object]') {
    throw new Error('options should be Object'); // 抛出错误
  }
  var method = options.method || 'GET'; // 参数默认值
  var url = options.url || '/';
  var success = options.success || null;
  var fail = options.fail || null;
  var data = options.data || null;
  data = toParams(data);

  var xhr;
  if (window.XMLHttpRequest) { // 现代浏览器
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  }

  // 事件处理
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        //  是 json 字符串
        success && success(JSON.parse(xhr.responseText)); // 如果 success 存在就执行 && 后面的代码
      } else {
        // console.log('请求失败了', xhr.status, xhr.statusText);
        fail && fail(xhr.statusText)
      }
    }
  }

  if (method.toUpperCase() == 'GET') {
    url = data ? (url + '?' + data) : url;
    xhr.open(method, url, true);
    xhr.send(null);
  } else if (method.toUpperCase() == 'POST') {
    xhr.open(method, url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
    xhr.send(data);
  }
}

function toParams(obj) {
  var arr = [];
  for (var key in obj) {
    arr.push(key + '=' + obj[key]);
  }
  console.log('遍历对象，将键值对拼接为字符串推入数组：', arr);
  return arr.join('&');
}